{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "fdc90059",
   "metadata": {},
   "source": [
    "# Jupyter notebook - 通讯\n",
    "\n",
    "> 以官方给的文档为例子\n",
    ">\n",
    "> https://jupyter-notebook.readthedocs.io/en/stable/comms.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "cf764756",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"output\"></id>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<div id=\"output\"></id>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "bc35319f",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "$(output).append(\"打印前端的输出\")\n",
       "$(output).append(\"<br>\")\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%js\n",
    "$(output).append(\"打印前端的输出\")\n",
    "$(output).append(\"<br>\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "3420eddb",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "18aaa49e1fce40378a3aa296828b0949",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Output()"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipywidgets import Output\n",
    "output = Output()\n",
    "output"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "8c9c3837",
   "metadata": {},
   "outputs": [],
   "source": [
    "with output:\n",
    "    print(\"打印后端的输出\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ddb2cd27",
   "metadata": {},
   "source": [
    "## Opening a comm from the kernel"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "f5366df7",
   "metadata": {},
   "outputs": [],
   "source": [
    "with output:\n",
    "    print(\"====== Opening a comm from the kernel ======\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "337a9e1b",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "$(output).append(\"====== Opening a comm from the kernel ======\")\n",
       "$(output).append(\"<br>\")\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%js\n",
    "$(output).append(\"====== Opening a comm from the kernel ======\")\n",
    "$(output).append(\"<br>\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "e791c5a6",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "Jupyter.notebook.kernel.comm_manager.register_target('my_comm_target',\n",
       "    function(comm, msg) {\n",
       "        // comm is the frontend comm instance\n",
       "        // msg is the comm_open message, which can carry data\n",
       "\n",
       "        // Register handlers for later messages:\n",
       "        comm.on_msg(function(msg) {\n",
       "            $(output).append(JSON.stringify(msg))\n",
       "        });\n",
       "        comm.on_close(function(msg) {\n",
       "            comm.send(\"close\");\n",
       "        });\n",
       "        comm.send({'foo': 0});\n",
       "        \n",
       "    });\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%js\n",
    "Jupyter.notebook.kernel.comm_manager.register_target('my_comm_target',\n",
    "    function(comm, msg) {\n",
    "        // comm is the frontend comm instance\n",
    "        // msg is the comm_open message, which can carry data\n",
    "\n",
    "        // Register handlers for later messages:\n",
    "        comm.on_msg(function(msg) {\n",
    "            $(output).append(JSON.stringify(msg))\n",
    "        });\n",
    "        comm.on_close(function(msg) {\n",
    "            comm.send(\"close\");\n",
    "        });\n",
    "        comm.send({'foo': 0});\n",
    "        \n",
    "    });"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "d4e1cfe8",
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipykernel.comm import Comm\n",
    "\n",
    "# Use comm to send a message from the kernel\n",
    "my_comm = Comm(target_name='my_comm_target', data={'foo': 1})\n",
    "my_comm.send({'foo': 2})\n",
    "\n",
    "# Add a callback for received messages.\n",
    "@my_comm.on_msg\n",
    "def _recv(msg):\n",
    "    with output:\n",
    "        print(msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b3daec60",
   "metadata": {},
   "source": [
    "# Opening a comm from the frontend"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "77dcc3ce",
   "metadata": {},
   "outputs": [],
   "source": [
    "with output:\n",
    "    print(\"====== Opening a comm from the frontend ======\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "78339200",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "$(output).append(\"====== Opening a comm from the frontend ======\")\n",
       "$(output).append(\"<br>\")\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%js\n",
    "$(output).append(\"====== Opening a comm from the frontend ======\")\n",
    "$(output).append(\"<br>\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "d6465781",
   "metadata": {},
   "outputs": [],
   "source": [
    "def target_func(comm, open_msg):\n",
    "    # comm is the kernel Comm instance\n",
    "    # msg is the comm_open message\n",
    "\n",
    "    # Register handler for later messages\n",
    "    @comm.on_msg\n",
    "    def _recv(msg):\n",
    "        # Use msg['content']['data'] for the data in the message\n",
    "        comm.send({'echo': msg['content']['data']})\n",
    "        with output:\n",
    "            print(msg)\n",
    "        \n",
    "    # Send data to the frontend on creation\n",
    "    comm.send({'foo': 5})\n",
    "\n",
    "get_ipython().kernel.comm_manager.register_target('my_comm_target', target_func)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "6bf1e0d2",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "const comm = Jupyter.notebook.kernel.comm_manager.new_comm('my_comm_target', {'foo': 6})\n",
       "// Send data\n",
       "comm.send({'foo': 7})\n",
       "\n",
       "// Register a handler\n",
       "comm.on_msg(function(msg) {\n",
       "    console.log(msg.content.data.foo);\n",
       "    $(output).append(JSON.stringify(msg))\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%js\n",
    "const comm = Jupyter.notebook.kernel.comm_manager.new_comm('my_comm_target', {'foo': 6})\n",
    "// Send data\n",
    "comm.send({'foo': 7})\n",
    "\n",
    "// Register a handler\n",
    "comm.on_msg(function(msg) {\n",
    "    console.log(msg.content.data.foo);\n",
    "    $(output).append(JSON.stringify(msg))\n",
    "});"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "99270c75",
   "metadata": {},
   "source": [
    "# Jupyter notebook - 自带的一些事件"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "95a7d0f3",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<input id=\"myCar\" list=\"cars\" />\n",
       "<datalist id=\"cars\">\n",
       "    <option value=\"BMW\">\n",
       "    <option value=\"Ford\">\n",
       "    <option value=\"Volvo\">\n",
       "</datalist>\n",
       "<button onclick=\"main()\" id=\"query\">输入你选择的车</button>\n",
       "<script>\n",
       "function main(){\n",
       "    require(['base/js/events'], (events)=>{\n",
       "      data = {\"myCar\":$(myCar).val()}\n",
       "      events.trigger('send_input_reply.Kernel', JSON.stringify(data))\n",
       "    })    \n",
       "}\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<input id=\"myCar\" list=\"cars\" />\n",
    "<datalist id=\"cars\">\n",
    "    <option value=\"BMW\">\n",
    "    <option value=\"Ford\">\n",
    "    <option value=\"Volvo\">\n",
    "</datalist>\n",
    "<button onclick=\"main()\" id=\"query\">输入你选择的车</button>\n",
    "<script>\n",
    "function main(){\n",
    "    require(['base/js/events'], (events)=>{\n",
    "      data = {\"myCar\":$(myCar).val()}\n",
    "      events.trigger('send_input_reply.Kernel', JSON.stringify(data))\n",
    "    })    \n",
    "}\n",
    "</script>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "id": "8580053f",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'{\"myCar\":\"BMW\"}'"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "data = input()\n",
    "data"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "40b578a9",
   "metadata": {},
   "source": [
    "# Jupyter notebook - echarts "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "id": "79cc5889",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!--\n",
       "\t此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line3d-orthographic&gl=1\n",
       "-->\n",
       "<!DOCTYPE html>\n",
       "<html lang=\"zh-CN\" style=\"height: 100%\">\n",
       "\n",
       "<head>\n",
       "  <meta charset=\"utf-8\">\n",
       "</head>\n",
       "\n",
       "<body style=\"height: 100%; margin: 0\">\n",
       "  <div id=\"container\" style=\"height: 1000px\"></div>\n",
       "\n",
       "  <script type=\"text/javascript\">\n",
       "\n",
       "    requirejs.config({\n",
       "      paths: {\n",
       "        echarts: 'https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min', // strip .js ^, require adds it back\n",
       "        gl: 'https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min',\n",
       "      },\n",
       "    });\n",
       "\n",
       "    require(['echarts', 'gl'], (echarts) => {\n",
       "      console.log(echarts)\n",
       "      var dom = document.getElementById('container');\n",
       "      var myChart = echarts.init(dom, null, {\n",
       "        renderer: 'canvas',\n",
       "        useDirtyRect: false\n",
       "      });\n",
       "      var app = {};\n",
       "\n",
       "      var option;\n",
       "\n",
       "      var data = [];\n",
       "      // Parametric curve\n",
       "      for (var t = 0; t < 25; t += 0.001) {\n",
       "        var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);\n",
       "        var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);\n",
       "        var z = t + 2.0 * Math.sin(75 * t);\n",
       "        data.push([x, y, z]);\n",
       "      }\n",
       "      console.log(data.length);\n",
       "      option = {\n",
       "        tooltip: {},\n",
       "        backgroundColor: '#fff',\n",
       "        visualMap: {\n",
       "          show: false,\n",
       "          dimension: 2,\n",
       "          min: 0,\n",
       "          max: 30,\n",
       "          inRange: {\n",
       "            color: [\n",
       "              '#313695',\n",
       "              '#4575b4',\n",
       "              '#74add1',\n",
       "              '#abd9e9',\n",
       "              '#e0f3f8',\n",
       "              '#ffffbf',\n",
       "              '#fee090',\n",
       "              '#fdae61',\n",
       "              '#f46d43',\n",
       "              '#d73027',\n",
       "              '#a50026'\n",
       "            ]\n",
       "          }\n",
       "        },\n",
       "        xAxis3D: {\n",
       "          type: 'value'\n",
       "        },\n",
       "        yAxis3D: {\n",
       "          type: 'value'\n",
       "        },\n",
       "        zAxis3D: {\n",
       "          type: 'value'\n",
       "        },\n",
       "        grid3D: {\n",
       "          viewControl: {\n",
       "            projection: 'orthographic'\n",
       "          }\n",
       "        },\n",
       "        series: [\n",
       "          {\n",
       "            type: 'line3D',\n",
       "            data: data,\n",
       "            lineStyle: {\n",
       "              width: 4\n",
       "            }\n",
       "          }\n",
       "        ]\n",
       "      };\n",
       "\n",
       "      if (option && typeof option === 'object') {\n",
       "        myChart.setOption(option);\n",
       "      }\n",
       "\n",
       "      window.addEventListener('resize', myChart.resize);\n",
       "\n",
       "\n",
       "    })\n",
       "  </script>\n",
       "</body>\n",
       "\n",
       "</html>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<!--\n",
    "\t此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line3d-orthographic&gl=1\n",
    "-->\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"zh-CN\" style=\"height: 100%\">\n",
    "\n",
    "<head>\n",
    "  <meta charset=\"utf-8\">\n",
    "</head>\n",
    "\n",
    "<body style=\"height: 100%; margin: 0\">\n",
    "  <div id=\"container\" style=\"height: 1000px\"></div>\n",
    "\n",
    "  <script type=\"text/javascript\">\n",
    "\n",
    "    requirejs.config({\n",
    "      paths: {\n",
    "        echarts: 'https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min', // strip .js ^, require adds it back\n",
    "        gl: 'https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min',\n",
    "      },\n",
    "    });\n",
    "\n",
    "    require(['echarts', 'gl'], (echarts) => {\n",
    "      console.log(echarts)\n",
    "      var dom = document.getElementById('container');\n",
    "      var myChart = echarts.init(dom, null, {\n",
    "        renderer: 'canvas',\n",
    "        useDirtyRect: false\n",
    "      });\n",
    "      var app = {};\n",
    "\n",
    "      var option;\n",
    "\n",
    "      var data = [];\n",
    "      // Parametric curve\n",
    "      for (var t = 0; t < 25; t += 0.001) {\n",
    "        var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);\n",
    "        var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);\n",
    "        var z = t + 2.0 * Math.sin(75 * t);\n",
    "        data.push([x, y, z]);\n",
    "      }\n",
    "      console.log(data.length);\n",
    "      option = {\n",
    "        tooltip: {},\n",
    "        backgroundColor: '#fff',\n",
    "        visualMap: {\n",
    "          show: false,\n",
    "          dimension: 2,\n",
    "          min: 0,\n",
    "          max: 30,\n",
    "          inRange: {\n",
    "            color: [\n",
    "              '#313695',\n",
    "              '#4575b4',\n",
    "              '#74add1',\n",
    "              '#abd9e9',\n",
    "              '#e0f3f8',\n",
    "              '#ffffbf',\n",
    "              '#fee090',\n",
    "              '#fdae61',\n",
    "              '#f46d43',\n",
    "              '#d73027',\n",
    "              '#a50026'\n",
    "            ]\n",
    "          }\n",
    "        },\n",
    "        xAxis3D: {\n",
    "          type: 'value'\n",
    "        },\n",
    "        yAxis3D: {\n",
    "          type: 'value'\n",
    "        },\n",
    "        zAxis3D: {\n",
    "          type: 'value'\n",
    "        },\n",
    "        grid3D: {\n",
    "          viewControl: {\n",
    "            projection: 'orthographic'\n",
    "          }\n",
    "        },\n",
    "        series: [\n",
    "          {\n",
    "            type: 'line3D',\n",
    "            data: data,\n",
    "            lineStyle: {\n",
    "              width: 4\n",
    "            }\n",
    "          }\n",
    "        ]\n",
    "      };\n",
    "\n",
    "      if (option && typeof option === 'object') {\n",
    "        myChart.setOption(option);\n",
    "      }\n",
    "\n",
    "      window.addEventListener('resize', myChart.resize);\n",
    "\n",
    "\n",
    "    })\n",
    "  </script>\n",
    "</body>\n",
    "\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bc82f842",
   "metadata": {},
   "source": [
    "# Jupyter notebook - jQuery UI"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "id": "f46c8dd6",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "  $(function() {\n",
       "    $( \"#dialog\" ).dialog();\n",
       "  });\n",
       "  </script>\n",
       " \n",
       "<div id=\"dialog\" title=\"基本的对话框\">\n",
       "  <p>这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>\n",
       "</div>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<script>\n",
    "  $(function() {\n",
    "    $( \"#dialog\" ).dialog();\n",
    "  });\n",
    "  </script>\n",
    " \n",
    "<div id=\"dialog\" title=\"基本的对话框\">\n",
    "  <p>这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9bdbf618",
   "metadata": {},
   "source": [
    "# Jupyter notebook - Vue"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "id": "fe1b2bda",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require.config({\n",
       "    paths: {　　　　　\n",
       "        \"Vue\": \"https://unpkg.com/vue@3/dist/vue.global\",\n",
       "        \"VueRouter\": \"https://unpkg.com/vue-router@4.0.15/dist/vue-router.global\",\n",
       "    },\n",
       "    shims: {\n",
       "        \"VueRouter\":{ \n",
       "            deps: [\"Vue\"],\n",
       "        },\n",
       "    },\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%js\n",
    "require.config({\n",
    "    paths: {　　　　　\n",
    "        \"Vue\": \"https://unpkg.com/vue@3/dist/vue.global\",\n",
    "        \"VueRouter\": \"https://unpkg.com/vue-router@4.0.15/dist/vue-router.global\",\n",
    "    },\n",
    "    shims: {\n",
    "        \"VueRouter\":{ \n",
    "            deps: [\"Vue\"],\n",
    "        },\n",
    "    },\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "id": "68b8b9cf",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"app\">\n",
       "  <h1>Hello App!</h1>\n",
       "  <p>\n",
       "    <!--使用 router-link 组件进行导航 -->\n",
       "    <!--通过传递 `to` 来指定链接 -->\n",
       "    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->\n",
       "    <router-link to=\"/\">Go to Home</router-link>\n",
       "    <br>\n",
       "    <router-link to=\"/about\">Go to About</router-link>\n",
       "    <br>\n",
       "    <router-link to=\"/users/westwood\">westwood</router-link>\n",
       "  </p>\n",
       "  <!-- 路由出口 -->\n",
       "  <!-- 路由匹配到的组件将渲染在这里 -->\n",
       "  <router-view></router-view>\n",
       "</div>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "\n",
    "<div id=\"app\">\n",
    "  <h1>Hello App!</h1>\n",
    "  <p>\n",
    "    <!--使用 router-link 组件进行导航 -->\n",
    "    <!--通过传递 `to` 来指定链接 -->\n",
    "    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->\n",
    "    <router-link to=\"/\">Go to Home</router-link>\n",
    "    <br>\n",
    "    <router-link to=\"/about\">Go to About</router-link>\n",
    "    <br>\n",
    "    <router-link to=\"/users/westwood\">westwood</router-link>\n",
    "  </p>\n",
    "  <!-- 路由出口 -->\n",
    "  <!-- 路由匹配到的组件将渲染在这里 -->\n",
    "  <router-view></router-view>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "id": "182467be",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require([\"Vue\"], ()=>{\n",
       "    require([\"VueRouter\"], ()=>{\n",
       "        console.log(Vue, VueRouter) \n",
       "        // 1. 定义路由组件.\n",
       "        // 也可以从其他文件导入\n",
       "        const Home = { template: `火烈鸟（学名：Phoenicopteridae），亦称红鹳。是鸟纲、红鹳科3属6种鸟类的通称。体高约80~160厘米，体重2.5~3.5千克。体型、大小似鹳；嘴短而厚，上嘴中部突，向下曲，下嘴较大成槽状；颈长而曲；脚极长而裸出，向前的三趾间有蹼，后趾短小而不着地；翅膀大小适中；尾短；体羽白而带玫瑰色，飞羽黑，覆羽深红，诸色相衬，非常艳丽。\n",
       "栖息于温热带盐湖水滨，涉行浅滩，以小虾、蛤蜊、昆虫、藻类等为食。觅食时头往下浸，嘴倒转，将食物吮入口中，把多余的水和不能吃的渣滓排出，然后徐徐吞下。性怯懦，喜群栖，常万余只结群。以泥筑成高墩作巢，巢基在水里，高约0.5米。孵卵时亲鸟伏在巢上，长颈后弯藏在背部羽毛中。每窝产卵1~2枚。卵壳厚，色蓝绿。孵化期约1个月。雏鸟初靠亲鸟饲育，逐渐自行生活。因羽色鲜丽，被人饲为观赏鸟。\n",
       "大红鹳分布于地中海沿岸，东达印度西北部，南抵非洲，亦见于西印度群岛；小红鹳分布于非洲东部、波斯湾和印度西北部；加勒比海红鹳、智利红鹳、安第斯红鹳和秘鲁红鹳分布均限于南美洲。` }\n",
       "        const About = { template: `<img src='https://www.bing.com/th?id=ALSTUA6CB1BE9253C5898A4C258A94974B482A651DDFFE6316B4980B528E9EBFCAEE1&w=472&h=280&c=13&rs=2&o=6&oif=webp&dpr=1.5&pid=SANGAM'>` }\n",
       "\n",
       "        const User = {\n",
       "          template: '<div>User {{ $route.params.id }}</div>',\n",
       "        }\n",
       "\n",
       "        \n",
       "        // 2. 定义一些路由\n",
       "        // 每个路由都需要映射到一个组件。\n",
       "        // 我们后面再讨论嵌套路由。\n",
       "        const routes = [\n",
       "          { path: '/', component: Home },\n",
       "          { path: '/about', component: About },\n",
       "          { path: '/users/:id', component: User },\n",
       "        ]\n",
       "\n",
       "        // 3. 创建路由实例并传递 `routes` 配置\n",
       "        // 你可以在这里输入更多的配置，但我们在这里\n",
       "        // 暂时保持简单\n",
       "        const router = VueRouter.createRouter({\n",
       "          // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。\n",
       "          history: VueRouter.createWebHashHistory(),\n",
       "          routes, // `routes: routes` 的缩写\n",
       "        })\n",
       "\n",
       "        // 5. 创建并挂载根实例\n",
       "        const app = Vue.createApp({})\n",
       "        //确保 _use_ 路由实例使\n",
       "        //整个应用支持路由。\n",
       "        app.use(router)\n",
       "\n",
       "        app.mount('#app')\n",
       "\n",
       "        // 现在，应用已经启动了！\n",
       "        \n",
       "    })\n",
       "})\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%js\n",
    "require([\"Vue\"], ()=>{\n",
    "    require([\"VueRouter\"], ()=>{\n",
    "        console.log(Vue, VueRouter) \n",
    "        // 1. 定义路由组件.\n",
    "        // 也可以从其他文件导入\n",
    "        const Home = { template: `火烈鸟（学名：Phoenicopteridae），亦称红鹳。是鸟纲、红鹳科3属6种鸟类的通称。体高约80~160厘米，体重2.5~3.5千克。体型、大小似鹳；嘴短而厚，上嘴中部突，向下曲，下嘴较大成槽状；颈长而曲；脚极长而裸出，向前的三趾间有蹼，后趾短小而不着地；翅膀大小适中；尾短；体羽白而带玫瑰色，飞羽黑，覆羽深红，诸色相衬，非常艳丽。\n",
    "栖息于温热带盐湖水滨，涉行浅滩，以小虾、蛤蜊、昆虫、藻类等为食。觅食时头往下浸，嘴倒转，将食物吮入口中，把多余的水和不能吃的渣滓排出，然后徐徐吞下。性怯懦，喜群栖，常万余只结群。以泥筑成高墩作巢，巢基在水里，高约0.5米。孵卵时亲鸟伏在巢上，长颈后弯藏在背部羽毛中。每窝产卵1~2枚。卵壳厚，色蓝绿。孵化期约1个月。雏鸟初靠亲鸟饲育，逐渐自行生活。因羽色鲜丽，被人饲为观赏鸟。\n",
    "大红鹳分布于地中海沿岸，东达印度西北部，南抵非洲，亦见于西印度群岛；小红鹳分布于非洲东部、波斯湾和印度西北部；加勒比海红鹳、智利红鹳、安第斯红鹳和秘鲁红鹳分布均限于南美洲。` }\n",
    "        const About = { template: `<img src='https://www.bing.com/th?id=ALSTUA6CB1BE9253C5898A4C258A94974B482A651DDFFE6316B4980B528E9EBFCAEE1&w=472&h=280&c=13&rs=2&o=6&oif=webp&dpr=1.5&pid=SANGAM'>` }\n",
    "\n",
    "        const User = {\n",
    "          template: '<div>User {{ $route.params.id }}</div>',\n",
    "        }\n",
    "\n",
    "        \n",
    "        // 2. 定义一些路由\n",
    "        // 每个路由都需要映射到一个组件。\n",
    "        // 我们后面再讨论嵌套路由。\n",
    "        const routes = [\n",
    "          { path: '/', component: Home },\n",
    "          { path: '/about', component: About },\n",
    "          { path: '/users/:id', component: User },\n",
    "        ]\n",
    "\n",
    "        // 3. 创建路由实例并传递 `routes` 配置\n",
    "        // 你可以在这里输入更多的配置，但我们在这里\n",
    "        // 暂时保持简单\n",
    "        const router = VueRouter.createRouter({\n",
    "          // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。\n",
    "          history: VueRouter.createWebHashHistory(),\n",
    "          routes, // `routes: routes` 的缩写\n",
    "        })\n",
    "\n",
    "        // 5. 创建并挂载根实例\n",
    "        const app = Vue.createApp({})\n",
    "        //确保 _use_ 路由实例使\n",
    "        //整个应用支持路由。\n",
    "        app.use(router)\n",
    "\n",
    "        app.mount('#app')\n",
    "\n",
    "        // 现在，应用已经启动了！\n",
    "        \n",
    "    })\n",
    "})\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fa548af2",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
